<template>
<div>
<b>书籍类别</b>
<li v-for=" cate in categories" :key=" cate. id" >
<a href=" " @ click. prevent=" clickHandler( cate. id )" >
{{
cate.name
}}
</a>
</li>
</ul>
</div>
</template>
<script>
export default{
    date(){
        return{
            categories:[{
                id:1,
                name:"文学类",
            },
            {
                id:2,
                name:"经济类",
            },
            {
                id:3,
                name:"艺术类",
            },
            
            ],

            
        };
    },
    methods:{
        clickHandler(cid){
            //向父组件派发自定义事件 categony,并将 cid 作为参数传递
            this. $ emit( " category", cid);
        },
    },
};
<script>
<style>
</style>